<template>
  <div class="login-bg " style="height: 700px;" >
    <div style=" opacity: 0.7;" >
      <div style="margin-left:350px ">
        <br> <br> <br> <br> <br> <br> <br>
        <el-card style=" margin-left: 100px; height:500px;border-radius: 30px" ::rules="rules">
          <span>智慧工地系统</span><br>
          <el-input placeholder="请输入账户名" v-model="user.userId" clearable>
          </el-input><br>

          <el-input placeholder="请输入密码" v-model="user.password" show-password clearable>
          </el-input><br>


          <br><br><br><br>
          <div style="margin-top: -30px; margin-left: 50px;">
            <span style="margin-right: 70px;">您的身份为：</span>
            <el-radio style="margin-right: 70px;" v-model="user.role" label="1">工地管理员</el-radio>
            <el-radio v-model="user.role" label="2">超级管理员</el-radio>
          </div>

          <div >
            <el-button id="button" style="position: relative; top: -10px;" @click="click()" type="primary" plain>登入</el-button>
           <!-- <el-button id="button" style="position: relative; top: -10px;" @click="click()" type="primary" plain>登录</el-button>

            <el-button id="button" style="position: relative;left: -80px; top: 50px;"type="primary" size="medium" round @click="regi_dialogVisible=true" > 注册</el-button>

-->
          </div>
        </el-card>


      </div>
    </div>
  </div>
</template>



<script>
export default {
  mounted() {
    //this.getCode();

  },
  components: {
  },
  data() {
    return {
      regi_dialogVisible:false,
      checkAns: '',
      imgCheck: false,
      imgStr: '',
      num: '',
      user: {
        userId: '',
        password: '',
        role: '',
      },
      regiUser:{
        userName:'',
        psd:'',
        role:1,
        useful:true,
      },
      rules:{
        userId: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        psd: [
          { required: true, message: '请输密码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {


    click0() {
      this.$router.push('/role1Homepage')

    },


    click() {
      console.log(233);
      console.log(this.user);
      console.log(this.user);
      if (this.user.userId.length == 0 || this.user.password.length == 0 ) {
        alert("用户名、密码、身份不得为空")
        return
      }

      this.$axios.post('http://localhost:8090/user/login', this.user, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
          .then(response => {
            console.log(response);
            if (response.data) {

              alert("登录成功");
              this.$router.push('/role1Homepage')
              window.sessionStorage.setItem("token", response.headers["token"]);
              window.sessionStorage.setItem("userId", this.user.userId);
              window.sessionStorage.setItem("role", this.user.role);


            }
            else {
              alert("登录失败")
            }
          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
    },
    register(){
      console.log("hello");
      console.log(this.regiUser);
      console.log("hello");
      this.$axios.post('http://localhost:8090/user/register', this.regiUser, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
          .then(response => {
            console.log(response);
            alert("用户id为："+response.headers["userid"]);
            console.log(response.headers);

          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
    }
  }
}
</script>

<style scoped>
.el-card {
  width: 690px;
  height: 390px;
}

.el-input {
  width: 500px;
  margin-top: 50px;
  margin-left: 50px;
}

.el-button {
  margin-top: 50px;
  margin-left: 260px;
}
.login-bg {
  background-image: url(@/assets/Login.jpg); /* 请根据实际路径修改图片的引用 */
  background-size: cover;
  /* 其他样式属性 */
}
</style>


